<template>
  <div class="answer-record-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>答题记录</h1>
      <p class="desc">查看历史考试记录及成绩详情</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-bar">
      <div class="filter-item">
        <label>考试名称：</label>
        <input 
          type="text" 
          v-model="filterPlanName" 
          placeholder="请输入考试名称"
          class="filter-input"
        >
      </div>
      <div class="filter-item">
        <label>状态：</label>
        <select v-model="filterStatus" class="filter-select">
          <option value="">全部状态</option>
          <option value="1">已完成</option>
          <option value="0">未完成</option>
        </select>
      </div>
      <button class="filter-btn" @click="fetchAnswerRecords">查询</button>
    </div>

    <!-- 记录列表 -->
    <div class="record-list" v-if="records.length > 0">
      <!-- 手机端不显示表头，通过列表项内标签展示字段 -->
      <div 
        class="record-item" 
        v-for="record in filteredRecords" 
        :key="record.id"
      >
        <div class="record-field">
          <span class="field-label">考试名称：</span>
          <span class="field-value">{{ record.planName }}</span>
        </div>
        <div class="record-field">
          <span class="field-label">考生姓名：</span>
          <span class="field-value">{{ record.userName }}</span>
        </div>
        <div class="record-field">
          <span class="field-label">得分：</span>
          <span class="field-value score">{{ record.score }}</span>
        </div>
        <div class="record-field">
          <span class="field-label">考试时间：</span>
          <span class="field-value">{{ formatDate(record.createdAt) }}</span>
        </div>
        <div class="record-field">
          <span class="field-label">状态：</span>
          <span class="field-value">
            <span class="status-tag" :class="statusClass(record.status)">
              {{ statusText(record.status) }}
            </span>
          </span>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-else-if="!loading">
      <div class="empty-icon">📋</div>
      <p>暂无答题记录</p>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" v-if="loading">
      <div class="loading-spinner">加载中...</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, inject } from 'vue'
import { selectAnswer } from "@/api/common"

// 响应式数据
const records = ref([]); // 答题记录列表
const loading = ref(false); // 加载状态
// 筛选条件
const filterPlanName = ref('');
const filterStatus = ref('');
const toast = inject("toast")

// 初始化加载记录
onMounted(() => {
  fetchAnswerRecords();
});

// 获取答题记录
const fetchAnswerRecords = () => {
  loading.value = true;
  // 调用接口（带分页参数）
  selectAnswer({
    pageNo: 1,
    pageSize: 10
  }).then(res => {
    records.value = res.data.records || [];
    loading.value = false;
  }).catch(err => {
    console.error('获取答题记录失败', err);
    toast('加载记录失败，请重试');
    loading.value = false;
  });
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 状态文本映射
const statusText = (status) => {
  const statusMap = {
    1: '已完成',
    0: '未完成'
  };
  return statusMap[status] || '未知状态';
};

// 状态标签样式
const statusClass = (status) => {
  return {
    'status-completed': status === 1,
    'status-unfinished': status === 0
  };
};

// 筛选后的记录
const filteredRecords = computed(() => {
  return records.value.filter(record => {
    // 按考试名称筛选
    const matchName = !filterPlanName.value || 
      record.planName?.includes(filterPlanName.value);
    // 按状态筛选
    const matchStatus = !filterStatus.value || 
      record.status.toString() === filterStatus.value;
    return matchName && matchStatus;
  });
});
</script>

<style scoped lang="less">
.answer-record-container {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  text-align: center;
  
  h1 {
    margin: 0;
    color: #333;
    font-size: 22px;
  }
  
  .desc {
    color: #666;
    margin: 8px 0 0;
    font-size: 13px;
  }
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    
    label {
      color: #666;
      font-size: 13px;
    }
    
    .filter-input, .filter-select {
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      width: 100%;
      box-sizing: border-box;
      
      &:focus {
        outline: none;
        border-color: #1890ff;
      }
    }
  }
  
  .filter-btn {
    padding: 10px 0;
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    width: 100%;
    margin-top: 5px;
    
    &:hover {
      background-color: #096dd9;
    }
  }
}

.record-list {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.record-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background-color: #f9f9f9;
  }
}

.record-field {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.field-label {
  font-size: 13px;
  color: #888;
  min-width: 80px;
  flex-shrink: 0;
}

.field-value {
  font-size: 14px;
  color: #333;
  word-break: break-all;
  flex-grow: 1;
}

.score {
  color: #f5222d;
  font-weight: bold;
}

.status-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-unfinished {
  background-color: #fff7e6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  
  .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  p {
    font-size: 14px;
  }
}

.loading-state {
  text-align: center;
  padding: 60px 20px;
  
  .loading-spinner {
    color: #666;
    font-size: 14px;
  }
}
</style>
